<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>故障信息</title>
    <link href="../../../css/common.css" rel="stylesheet"/>
    <link href="../../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../../css/mui.picker.min.css" rel="stylesheet"/>
    <link href="../../../css/mui.poppicker.css" rel="stylesheet"/>
    <link href="../../../css/order/orderDetail.css" rel="stylesheet"/>


    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/mui-componets.js"></script>
    <script src="../../../js/fastclick.js"></script>
    <script src="../../../js/vue-common.js"></script>
    <script src="../../../js/mui.picker.min.js"></script>
    <script src="../../../js/mui.poppicker.js"></script>
    <script src="../../../js/api.js"></script>
    <script src="../../../js/common.js"></script>
    <script src="./add.components.js"></script>

</head>
<body>
<div id="app">
    <div class="header-nav">
        <span>故障信息</span>
        <div class="icon"><img src="../../../img/common/btn_back.png" alt=""></div>
    </div>

    <div class="container">
        <!--设备信息-->
        <add-order-device-info :data="device"></add-order-device-info>

        <!--报修类型-->
        <div class="card-box device-info">
            <span class="label-light">报修类型</span>
            <ls-single-select :type-map="errorStatusMap" v-model="form.errorStatus"></ls-single-select>
        </div>
        <!--故障模块-->
        <div class="card-box device-info">
            <span class="label-light ">故障模块</span>
            <ls-multi-select :type-map="errorTypeMap" v-model="form.errorType"></ls-multi-select>
        </div>
        <!--特殊需求-->
        <add-order-special-info :abutment-user-name="abutmentUserName"></add-order-special-info>
        <div class="card-box li">
            <!--选择图片-->
            <xlb-select-img v-model="form.errorImg"></xlb-select-img>
            <div class="card-box device-info">
                <div class="order-title">故障描述</div>
                <div>
                    <textarea v-model="form.errorDescribe" class="text-area" placeholder="请详细描写机具出现的故障"></textarea>
                </div>
            </div>
        </div>
        <div @touchstart="addOrder" :class="{disabled:submitFlag}" class="xl-btn normal no-shadow">提交</div>
    </div>

    <xlb-modal v-model="confirmMod">
        <div class="dialog-content" slot="content">确认不填写故障描述吗？</div>
        <div slot="footer-left">取消</div>
        <div @click="doConfirm" slot="footer-right">确定</div>
    </xlb-modal>
</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            orderId: '',
            confirmMod: false,
            code: '',
            showFlg: false,
            submitFlag: false,

            /**
             * 机具编码
             */
            deviceCode: '',
            /**
             * 设备
             */
            device: {
                id: '',
                insSide: '',
                typeName: '',
            },
            /**
             * 故障模块map
             */
            errorTypeMap: {},
            /**
             * 故障图片展示
             */
            errorImgShow: [],
            /**
             * 故障状态map
             */
            errorStatusMap: {},
            //表单参数
            form: {
                /**
                 * 故障图片
                 */
                errorImg: [],
                /**
                 * 选择的故障模块
                 */
                errorType: [],
                /**
                 * 故障状态
                 */
                errorStatus: '',
                /**
                 * 故障描述
                 */
                errorDescribe: '',

                yuyueFlag: false,
                /**
                 * 预约时间
                 */
                dateDate: '',
                limitFlag: false,
                /**
                 * 限定完成时间
                 */
                limitDate: '',
                /**
                 * 联系人
                 */
                contactFlag: false,
                abutmentUserId: '',

            },
            abutmentUserName: '未填写',
            submitParams: ''
        },
        methods: {
            getDeviceInfo: function (code) {
                Resource.post(DEVICE_API, {code: code}, function (res) {
                    //故障状态
                    vm.errorStatusMap = res.errorStatusMap;
                    //故障模块
                    vm.errorTypeMap = res.errorUnTypeMap;
                    //设备
                    vm.device = res.device;
                })
            },
            //生成订单
            addOrder: function () {
                // 必要参数检查
                if(!this.checkRequiredFormParams()){
                    return
                }
                // 封装参数
                var params = this.buildOrderData();
                if (!this.form.errorDescribe) {
                    this.confirmMod = true;
                } else {
                    vm.doSaveOrder(params);
                }

            },
            doConfirm: function () {
                var params = this.buildOrderData();
                this.doSaveOrder(params);
            },
            doSaveOrder: function (params) {
                if (!params) {
                    params = this.submitParams;
                }
                this.submitFlag = true;
                params.orderId = this.orderId;
                this.btnTitle = '提交中',
                    Resource.post(ORDER_DISPATCHER_TO_TMP_API, params, function (res) {
                        mui.toast('报修成功！')
                        vm.showFlg = false;
                        vm.submitFlag = false;
                        //跳转订单页面
                        var ws = plus.webview.currentWebview();
                        plus.webview.close(ws);
                        var orderDetail = plus.webview.getWebviewById('pages/order/innner/detail.html');
                        plus.webview.close(orderDetail);
                        var style = {
                            top: '0px'
                        };
                        var animate = 'fade-in';
                        redirectByCommon('pages/order/list.html', style, animate);
                    }, function () {
                        vm.showFlg = false;
                        vm.submitFlag = false;
                    })
            },
            checkRequiredFormParams:function(){
                if (this.submitFlag) {
                    return;
                }
                if (!this.device.id) {//校验机具ID
                    return mui.toast("请选择报修设备");
                }
                if (!this.form.errorStatus) {
                    return mui.toast("请选择报修类型");
                }
                if (!this.form.errorType.length) {
                    return mui.toast("请选择故障模块");
                }
                if (this.form.limitFlag && (!this.form.limitDate)) {
                    return mui.toast("请填写限定完成时间");
                }
                if (this.form.yuyueFlag && (!this.form.dateDate)) {
                    return mui.toast("请填写预约时间");
                }
                if (this.form.contactFlag && (!this.form.abutmentUserId)) {
                    return mui.toast("请填写联系人");
                }
                return true;

            },
            buildOrderData: function () {
                return {
                    orderId: this.orderId,
                    deviceId: this.device.id,
                    /**
                     * 故障图片
                     */
                    errorImg: this.form.errorImg + '',
                    /**
                     * 选择的故障模块
                     */
                    errorType: this.form.errorType + '',
                    /**
                     * 故障状态
                     */
                    errorStatus: this.form.errorStatus,
                    /**
                     * 故障描述
                     */
                    errorDescribe: this.form.errorDescribe,
                    /**
                     * 预约时间
                     */
                    dateDate: this.form.dateDate,
                    /**
                     * 限定完成时间
                     */
                    limitDate: this.form.limitDate,
                    /**
                     * 联系人
                     */
                    abutmentUserId: this.form.abutmentUserId,

                }

            }
        }
    });


</script>
<script>

    selectTime('yuyueTime', function (data) {
        vm.form.dateDate = data;
    }, '预约时间: ');//预约时间
</script>
<script>
    function selectContactUser() {
        Resource.get(ORDER_ADD_CONTACT_API, {}, function (res) {
            /**
             * "abutmentUserId":26,"abutmentUserName":"JackWu",
             * 获取对象属性的值
             * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
             * @param {Object} obj 对象
             * @param {String} param 属性名
             */
            var _getParam = function (obj, param) {
                return obj[param] || '';
            };
            //普通示例
            var userPicker = new mui.PopPicker();
            var listUser = [];
            for (var index in res) {
                listUser.push({
                    value: res[index]['abutmentUserId'],
                    text: res[index]['abutmentUserName']
                })
            }
            userPicker.setData(listUser);
            var showUserPickerButton = document.getElementById('showUserPicker');
            var userResult = document.getElementById('showUserPicker');
            showUserPickerButton.addEventListener('tap', function (event) {
                userPicker.show(function (items) {
                    userResult.innerText = "对接人： " + items[0].text;
                    vm.form.abutmentUserId = items[0].value;
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                });
            }, false);
        })
    }

    mui.plusReady(function (data) {
        var self = plus.webview.currentWebview();
        vm.code = self.code;
        vm.orderId = self.orderId;
        vm.getDeviceInfo(self.code);
        vm.showFlg = false;
    });

    // 处理选择联系人
    function dealSelectContact(data) {
        data = JSON.parse(data);
        vm.abutmentUserName = data.name;
        if (data.type == 1) {
            vm.form.abutmentUserId = data.id;
        }
    }

    mui.init({
        beforeback: function () {
            if (vm.imgShow) {
                return vm.imgShow = false;
            }
            return true;
        }
    });
</script>

</body>
</html>